<template>
  <view @touchstart="start" @touchend="end" :style="bodyStyle">
    <slot></slot>
  </view>

</template>

<script>
export default {
  name: "GesturePageTurning",
  props:{
      bodyStyle:String,
  },

  data() {
    return {
      startData: {
        clientX: 0,
        clientY: 0
      }
    }
  },

  methods: {

    start(e) {
      // console.log("开始下滑坐标", e.changedTouches[0].clientY)
      this.startData.clientX = e.changedTouches[0].clientX;
      this.startData.clientY = e.changedTouches[0].clientY;
    },
    end(e) {
      // console.log("结束下滑坐标", e.changedTouches[0].clientY)
      const subX = e.changedTouches[0].clientX - this.startData.clientX;
      const subY = e.changedTouches[0].clientY - this.startData.clientY;
      if (subY < -50) {
        console.log('下滑')
      } else if (subY > 50) {
        console.log('上滑')
      } else if (subX > 50) {
        console.log('左滑')
        this.$emit('leftSlide')
      } else if (subX < -50) {
        console.log('右滑')
        this.$emit('rightSlide')
      } else {
        console.log('无效')
      }
    }
  },
}
</script>

<style scoped>

</style>
